<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout">
<head>
    <title>设置区域</title>
</head>
<body>
<div layout:fragment="content">
    <div class="row">
        <div class="col-md-12">
            <div class="btn-group pull-right">
                <a href="index.html" th:href="@{/system/deliver/index}" id="link_return" class="btn green">返回<i
                        class="fa fa-arrow-circle-o-left"></i></a>
            </div>
        </div>
    </div>
            <div class="col-md-12">
            <div class="form">
                <form th:action="@{/system/deliver/saveAreas}" method="post" role="form" onsubmit="return false;" id="form_setarea" class="form-horizontal">
                    <input type="hidden" name="id" th:value="${deliver.id}" />
                    <div class="form-body">
                        <div class="form-group">
                            <div class="row text-center">
                                <div class="col-md-5">
                                    <div class="text-center">
                                        <label class="btn btn-block green">可选地区</label>
                                    </div>
                                    <select multiple="multiple" class="form-control"  size="10"  id="select_areaList">
                                        <option th:each="deliverArea : ${deliverAreaList}" th:value="${deliverArea.id}" th:text="${deliverArea.name}"></option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <div class="text-center">
                                        <label class="btn btn-block green">操作</label>
                                    </div>
                                    <label></label>
                                    <div class="btn-group-vertical">
                                        <button type="button" class="btn btn-xs purple " id="btn_leftAll2Right" style="margin-top: 5px;">&nbsp;&nbsp;<i class="fa fa-angle-double-right"></i>&nbsp;&nbsp;</button>
                                        <button type="button" class="btn btn-xs purple " id="btn_left2Right" style="margin-top: 5px;"><i class="fa fa-angle-right"></i></button>
                                        <button type="button" class="btn btn-xs purple " id="btn_right2Left" style="margin-top: 5px;"><i class="fa fa-angle-left"></i></button>
                                        <button type="button" class="btn btn-xs purple " id="btn_rightAll2Left" style="margin-top: 5px;"><i class="fa fa-angle-double-left"></i></button>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="text-center">
                                        <label class="btn btn-block green">已选择地区</label>
                                    </div>
                                    <select  name="deliverAreaIdList" multiple="multiple" class="form-control" size="10" id="select_deliverAreaIdList">
                                        <option th:each="deliverArea : ${deliver.deliverAreaList}" th:value="${deliverArea.id}" th:text="${deliverArea.name}"></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
                <div class="form-actions fluid">
                    <div class="col-md-offset-3 col-md-5">
                        <button id="bt_submit"  class="btn blue btn-block">提交</button>
                    </div>
                </div>

</div>
</body>
</html>

<script th:inline="javascript">
    /*<![CDATA[*/
    $(document).ready(function () {

        $("#select_areaList option").live("dblclick",function(){
            var $options = $(this);
            var $remove = $options.remove();
            $remove.attr("selected",false).appendTo($("#select_deliverAreaIdList"));
        });

        $("#select_deliverAreaIdList option").live("dblclick",function(){
            var $options = $(this);
            var $remove = $options.remove();
            $remove.attr("selected",false).appendTo($("#select_areaList"));
        });

        $("#btn_left2Right").click(function(){
            var $options = $("#select_areaList option:selected");
            if($options.size() > 0) {
                var $remove = $options.remove();
                $remove.attr("selected",false).appendTo($("#select_deliverAreaIdList"));
            }else {
                bootbox.alert("请选择地区！");
            }


        });

        $("#btn_right2Left").click(function(){

            var $options = $("#select_deliverAreaIdList option:selected");
            if($options.size() >0) {
                var $remove = $options.remove();
                $remove.attr("selected", false).appendTo($("#select_areaList"));
            }else {
                bootbox.alert("请选择地区！");
            }


        });
        $("#btn_leftAll2Right").click(function(){
            var $options = $("#select_areaList option");
             if($options.size() > 0) {
                 var $remove = $options.remove();
                 $remove.attr("selected", false).appendTo($("#select_deliverAreaIdList"));
             }else {
                 bootbox.alert("请选择地区！");
             }
        });

        $("#btn_rightAll2Left").click(function(){
            var $options = $("#select_deliverAreaIdList option");
            if($options.size() > 0) {
                var $remove = $options.remove();
                $remove.attr("selected", false).appendTo($("#select_areaList"));
            }else {
                 bootbox.alert("请选择地区！");
            }
        });

        $("#bt_submit").click(function () {
            $("#select_deliverAreaIdList option").each(function(){
                this.selected = true;
            });
            document.forms[0].submit();
        });
    });
    /*]]>*/
</script>